import React from "react";
import "./index.css";
import http from "../../api/http";
import { NavBar } from "antd-mobile";
import { Form, Button } from "antd-mobile";
import { Input } from "antd";
import { useNavigate } from "react-router-dom";
import { Wechat } from "@react-vant/icons";
import useDebounce from "../../hooks/useDebounce";
function Index() {
  const navigate = useNavigate();
  const onFinish = useDebounce(async (value) => {
    const res =await http.post("/api/login", value);
    const { code, data } = res.data;
    console.log(data)
    if (code === 200) {
      localStorage.setItem("token", data.token);
      localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
      navigate("/user");
    }
  },1000);
//   // 5.实现登录页功能
// 5-1.表单各项输入验证必填，密码可以查看明文
// 5-2.封装自定义hooks实现防抖，防止登录按钮暴力点击
  return (
    <div>
      <NavBar onBack={()=>navigate("/")}></NavBar>
      <div className="biaoti">
        <h2>你好，安娜！</h2>
        <span>欢迎回来，大家都很想念你</span>
      </div>

      <Form
        layout="horizontal"
        onFinish={onFinish}
        footer={
          <Button
            block
            type="submit"
            color="warning"
            size="large"
            // onClick={() => navigate("/user")}
          >
            登录
          </Button>
        }
      >
        <Form.Header></Form.Header>
        <Form.Item
          name="username"
          label=""
          rules={[
            { required: true },
            { type: "string", min: 6 },
            { type: "email", warningOnly: true },
          ]}
        >
          <Input placeholder="请输入邮箱" />
        </Form.Item>
        <Form.Item
          name="password"
          label=""
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <div>
            <Input.Password placeholder="1234" />
          </div>
        </Form.Item>
      </Form>
      <p className="text">或</p>

      <div className="weixin">
        <Wechat color="green" />
        <span>使用微信登录</span>
      </div>
      <div className="weixin">
        <Wechat color="blue" />
        <span>使用qq登录</span>
      </div>

      <div style={{ marginTop: "200px" }}>
        <span>登录及表示我接受《服务条款》和《社区指南》并已阅读一世影虎</span>
      </div>
    </div>
  );
}

export default Index;
